import { createApp } from 'vue';
import CustomLoading from '@/components/lib/loading/CustomLoading.vue';
export default {
  name: 'loading',
  mounted(el: any, binding: any) {
    const app = createApp(CustomLoading);
    const instance = app.mount(document.createElement('div'));
    const name = CustomLoading.name === undefined ? '' : CustomLoading.name;
    if (undefined !== name && !el[name]) {
      el[name] = {};
    }
    el[name].instance = instance;
    if (binding.value) {
      append(el, CustomLoading);
    }
  },
  updated(el: any, binding: any) {
    const name = CustomLoading.name;
    if (undefined !== name && !el[name]) {
      el[name] = {};
    }
    if (binding.value !== binding.oldValue) {
      if (binding.value) {
        append(el, CustomLoading);
      } else {
        remove(el, CustomLoading);
      }
    }
  },
};
function append(el: any, comp: any) {
  const style = getComputedStyle(el);
  const name = comp.name;
  if (['absolute', 'fixed', 'relative'].indexOf(style.position) === -1) {
    if (!el.classList.contains('portal-relative')) {
      el.classList.add('portal-relative');
    }
  }
  el.appendChild(el[name].instance.$el);
}
function remove(el: any, comp: any) {
  const name = comp.name;
  el.classList.remove('portal-relative');
  el.removeChild(el[name].instance.$el);
}
